<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span class="title-icon">运单信息</span>
    </div>

    <el-row v-if="subList.length > 0" class="padding-40 sub-list" :gutter="20">
      <el-col v-for="(item, index) in subList" :key="index" :md="12" :lg="6">
        <div class="form-box">
          <div class="close-box">
            <i class="el-icon-close" @click="closeForm(index)" />
          </div>
          <el-form
            ref="form"
            :rules="rules"
            :model="item"
            label-width="100px"
            label-position="left"
            size="mini"
          >
            <el-form-item v-if="item.waybillNo" prop="waybillNo">
              <div slot="label">运单号:</div>
              <el-input v-model="item.waybillNo" disabled />
            </el-form-item>
            <el-form-item prop="referenceNo">
              <div slot="label">参考号:</div>
              <el-input v-model="item.referenceNo" />
            </el-form-item>
            <el-form-item prop="customerActualWeight">
              <div slot="label">总实重(KG):</div>
              <el-input v-model="item.customerActualWeight" />
            </el-form-item>
            <el-form-item prop="customerVolume">
              <div slot="label">体积(CBM):</div>
              <el-input v-model="item.customerVolume" />
            </el-form-item>
            <el-form-item prop="customerTotalPackages">
              <div slot="label">件数:</div>
              <el-input v-model="item.customerTotalPackages" />
            </el-form-item>
            <el-form-item prop="customerChargedWeight">
              <div slot="label">计费重:</div>
              <el-input v-model="item.customerChargedWeight" />
            </el-form-item>

            <el-form-item prop="purposeWarehouseType" label-width="110px">
              <div slot="label">目的仓库类型：</div>
              <el-radio-group v-model="item.purposeWarehouseType">
                <el-radio
                  v-for="(item, value) in publicData.stockTypeEnableMap"
                  :key="value"
                  :label="parseInt(value)"
                >
                  {{ item }}
                </el-radio>
              </el-radio-group>
            </el-form-item>

            <div v-if="item.purposeWarehouseType !== 700">
              <el-form-item prop="dispatchAddressCode">
                <div slot="label">详细地址:</div>
                <el-select
                  v-model="item.dispatchAddressCode"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(p, v) in fbaCodeZipCodeMap"
                    :key="v"
                    :label="`${p.address} (${p.fbaCode})`"
                    :value="p.fbaCode"
                  />
                </el-select>
              </el-form-item>
            </div>

            <div v-else>
              <el-form-item prop="dispatcher">
                <div slot="label">公司名/个人:</div>

                <div class="flex">
                  <el-input v-model="item.dispatcher" type="text" />
                  <el-button
                    type="text"
                    class="margin-left"
                    @click="showDialog(index)"
                    ><svg-icon name="international" /> 常用派送地址</el-button
                  >
                </div>
              </el-form-item>
              <el-form-item prop="dispatchLinkMan">
                <div slot="label">联系人:</div>

                <el-input v-model="item.dispatchLinkMan" type="text" />
              </el-form-item>
              <el-form-item prop="dispatchPhone">
                <div slot="label">联系电话:</div>

                <el-input v-model="item.dispatchPhone" type="text" />
              </el-form-item>
              <el-form-item prop="dispatchProvince">
                <div slot="label">州/省:</div>

                <el-input v-model="item.dispatchProvince" type="text" />
              </el-form-item>
              <el-form-item prop="dispatchCity">
                <div slot="label">城市:</div>

                <el-input v-model="item.dispatchCity" type="text" />
              </el-form-item>
              <el-form-item prop="dispatchZipCode">
                <div slot="label">邮编:</div>

                <div class="flex">
                  <el-input v-model="item.dispatchZipCode" type="number" />
                  <el-button
                    class="margin-left"
                    type="text"
                    icon="el-icon-s-management"
                    @click="saveShippingAddress"
                    >保存为常用派送地址</el-button
                  >
                </div>
              </el-form-item>
              <el-form-item prop="dispatchAddress">
                <div slot="label">详细地址:</div>

                <el-input v-model="item.dispatchAddress" type="text" />
              </el-form-item>
            </div>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <div class="padding-40">
      <el-button size="small" type="primary" plain @click="addSub"
        >点击添加分单信息</el-button
      >
    </div>
    <ImportDialog :selectDispatch.sync="selectDispatch" @dialogCb="dialogCb" />
  </el-card>
</template>

<script>
import ImportDialog from './ImportDialog'
import { mapGetters } from 'vuex'
import { customerdeliveryaddressSave } from '@/api/myProfile'
export default {
  components: { ImportDialog },
  props: ['countryId', 'fbaCodeZipCodeMap'],
  data() {
    return {
      selectDispatch: false,
      subList: [],
      delSubIds: [],
      rules: {
        purposeWarehouseType: [
          { required: true, message: '请选择目的仓库', trigger: 'change' }
        ],
        customerActualWeight: [
          { required: true, message: '请填写正整数', trigger: 'blur' },
          {
            pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,3})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: '须为数字,可留3位小数'
          }
        ],
        customerVolume: [
          { required: true, message: '请填写正整数', trigger: 'blur' },
          {
            pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,3})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: '须为数字,可留3位小数'
          }
        ],
        referenceNo: [
          { required: false, message: '请填写参考号', trigger: 'blur' }
        ],
        customerTotalPackages: [
          { required: true, message: '请填写件数', trigger: 'blur' }
        ],
        customerChargedWeight: [
          { required: false, message: '请填写计费重', trigger: 'blur' }
        ],
        dispatcher: [
          { required: true, message: '请填写公司名/个人', trigger: 'blur' }
        ],
        dispatchLinkMan: [
          { required: true, message: '请填写联系人', trigger: 'blur' }
        ],
        dispatchPhone: [
          { required: true, message: '请填写联系电话', trigger: 'blur' }
        ],
        dispatchProvince: [
          { required: true, message: '请填写州/省', trigger: 'blur' }
        ],
        dispatchZipCode: [
          { required: true, message: '请填写邮编', trigger: 'blur' }
        ],
        dispatchCity: [
          { required: true, message: '请填写城市', trigger: 'blur' }
        ],
        dispatchAddress: [
          { required: true, message: '请填写详细地址', trigger: 'blur' }
        ]
      },
      shippingRules: {
        dispatcher: '公司名/个人',
        dispatchLinkMan: '联系人',
        dispatchPhone: '联系电话',
        dispatchProvince: '州/省',
        dispatchZipCode: '邮编',
        dispatchCity: '城市',
        dispatchAddress: '详细地址'
      }
    }
  },
  computed: {
    ...mapGetters(['publicData'])
  },
  methods: {
    addSub() {
      this.subList.push({
        referenceNo: '',
        customerActualWeight: '',
        customerVolume: '',
        customerTotalPackages: '',
        customerChargedWeight: '',
        purposeWarehouseType: 100,
        dispatchAddressCode: '',
        dispatcher: '',
        dispatchLinkMan: '',
        dispatchPhone: '',
        dispatchProvince: '',
        dispatchZipCode: '',
        dispatchCity: '',
        dispatchAddress: ''
      })
    },
    closeForm(i) {
      console.log('i :>> ', this.subList[i].id)
      if (this.subList[i].id) {
        this.delSubIds.push(this.subList[i].id)
      }
      console.log('this.delSubIds :>> ', this.delSubIds)
      this.subList.splice(i, 1)
    },
    showDialog(i) {
      this.selectDispatch = true
      this.selectIndex = i
    },
    dialogCb(params) {
      this.subList[this.selectIndex] = Object.assign(
        this.subList[this.selectIndex],
        params
      )
    },
    async saveShippingAddress(item) {
      if (!this.countryId) {
        this.$message.error('请选择目的国家！')
        return
      }

      for (const i in this.shippingRules) {
        if (!item[i]) {
          this.$message.error('请填写' + this.shippingRules[i] + '！')
          return
        }
      }

      const data = await customerdeliveryaddressSave({
        id: '',
        customerDeliveryCompany: item.dispatcher,
        customerDeliveryAddressAttn: item.dispatchLinkMan,
        customerDeliveryAddressPhone: item.dispatchPhone,
        address: item.dispatchAddress,
        city: item.dispatchCity,
        state: item.dispatchProvince,
        countryId: item.countryId,
        zipCode: item.dispatchZipCode
      })
      if (data.code === 200) {
        this.$message({
          message: '保存成功',
          type: 'success'
        })
      } else {
        this.$message.error(data.message)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.sub-list {
  padding-bottom: 0;
  .form-box {
    border: 1px solid #dcdfe6;
    padding: 0 20px;
    margin-bottom: 20px;

    .close-box {
      text-align: right;
      padding: 10px 0;
      i {
        font-size: 18px;
        cursor: pointer;
      }
    }
  }
}
</style>
